<!-- 摄像头 -->
<template>
  <div class="shexiangtou">
    <!-- div替换video -->
    <div style="    width: 100%;margin-bottom: 5px;
    text-align: right;
}">

      <button style="border-radius: 5px;
    border: 1px;
    background-color: #ccc;">{{list.length}}个摄像头</button>


    </div>
    <div class="item" @click="godetails(item)" v-for="item in list" v-bind:key="item.id" style="clear:both">
      <!-- <video src="" class="video"></video> -->
      <img width="100%" height="100%" :src="item.imgurl" style="   border-radius: 10px !important;" />
      <span>{{ item.name }}</span>
      <a style="color:red;    float: right;" @click.stop="unbind(item)">解绑</a>
    </div>

  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
import { cameraList } from "../../../api/camera";
import { userDeviceDel } from "../../../api/user";
export default {
  name: "",
  data() {
    return {
      list: [],
      img: require("../../../assets/images/图0-3.png"),
    };
  },
  methods: {
    godetails(item) {

      window.ReactNativeWebView.Video(item.code,item.keystr);

      // this.$router.push({ path: '/camera', query: { code: item.code } })
    },
    async getData() {
      var areaid = this.$route.query.aid;

      let res = await cameraList({ userid: localStorage.getItem("userid"), areaid: areaid });

      if (res.status == 200) {
        this.list = res.data;
      }
    },
    async unbind(uitem) {
      Dialog.confirm({
        title: '系统提示',
        message: '确定要解绑吗？',
      })
        .then(async () => {
          let res = await userDeviceDel({ id: uitem.userdevice_id });
          if (res.status == 200) {
            this.$toast("解绑成功");
            this.getData();

          }
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  computed: {},
  watch: {},
  async created() {

    this.getData();



  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.shexiangtou {
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;


  .item {
    width: 47%;
    height: 200px;
    background-color: #fff;
    border-radius: 25px;
    margin-bottom: 50px;

    .video {
      width: 100%;
      height: 100%;
    }

    span {
      margin-top: 10px;
    }
  }
}

.van-image__error,
.van-image__img,
.van-image__loading {
  border-radius: 20px !important;
}
</style>